// ------------获取文章列表数据---------
//声明请求参数
let data = {
  pagenum: 1,  // 页码，默认1
  pagesize: 2,  // 自己约定的，每页显示几条数据
};


// 定义函数，分页获取数据，并渲染导表格中
function renderArticle() {
  $.ajax({
    url: '/my/article/list',
    data: data,
    success: function (res) {
      console.log(res);
      if (res.status === 0) {
        let str = '';
       res.data.forEach(item => {
        str += `
        <tr>
              <td>${item.title}</td>
              <td>${item.cate_name}</td>
              <td>${item.pub_date}</td>
              <td>${item.state}</td>
              <td>
                <button type="button" class="layui-btn layui-btn-xs">
                <a href="./edit.html?id=${item.id}" class="layui-btn layui-btn-xs">编辑</a>
                </button>
                <button
                  type="button"
                  class="layui-btn layui-btn-xs layui-btn-danger"
                >
                  删除
                </button>
              </td>
            </tr>
        `;
       });
       $('tbody').html(str);
      //  等页面刷新渲染完毕，调用函数，创建分页
      showPage(res.total);
      }
    }
  })
}
renderArticle();


// -------------分页-----------
function showPage (t) {
  let laypage = layui.laypage;

//执行一个laypage实例
laypage.render({
  elem: 'page',  // 注意，这里的 test1 是ID， 不用加 #
  count: t,  // 数据总数，从服务端得到
  limit: data.pagesize, // 每页显示几条
  limits: [2, 3, 5, 10, 15],  
  curr: data.pagenum,   // 当前页
  // prev: '上一页',
  layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'],   // 自定义排版
  // 点击页码的时候，会触发下面的jump函数。页面刷新之后，也会触发一次
  jump: function (obj, first) {
    // 首次不执行
    if (!first) {
    // obj 包含了当前分页的所有参数，比如：
    // console.log(obj.curr);  得到当前页，以便向服务器请求对应页的数据
    // console.log(obj.limit);  得到每页显示的条数
    data.pagenum = obj.curr;
    data.pagesize = obj.limit;  // 每页显示几条
    renderArticle();
    }
    
  }
});
}


// ------------获取分类----------
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    console.log(res);
    let str = '';
    if (res.status === 0) {
      res.data.forEach(item => {
       
        str += ` <option value="${item.id}">${item.name}</option>`;
      });
      $('#cate_id').append(str);
      // 动态创建的 下拉框、 单项按钮、复选按钮，需要更新渲染
      let form = layui.form;
      // form.render('select', '表单的lay-filter属性的值')
      form.render('select');
    }
  }
});




// ----------筛选----------
$('#search').on('submit', function (e) {
  e.preventDefault();
  // 获取两个下拉框的值
  let cate_id = $('#cate_id').val();
  let state = $('#state').val();

  // 添加请求参数
  if (cate_id) {
    data.cate_id = cate_id;
  } else {
    delete data.cate_id;  // delete用于删除对象的属性
  }

  if (state) {
    data.state = state;
  } else {
    delete data.state;
  }

  // 重置pagenum，筛选之后。从第一页开始浏览数据
  data.pagenum = 1;

  // 发送请求，重新获取数据，重新渲染
  renderArticle();
});







// ------------删除功能--------------
$('tbody').on('click', 'button:contains("删除")', function () {
  var id = $(this).data('id');
  layer.confirm('你确定要删除吗？', function (index) {

    $.ajax({
      // url: '/my/article/delete/2',
      url: '/my/article/delete/' + id,
      success: function (res) {
        
        if (res.status === 0) {
          layer.msg(res.message);
          renderArticle();
        }
      }
    });

    layer.close(index); // 关闭弹层
  });
});




// -------------------编辑功能----------------------
